<template>
  <div class="register">
    <div class="avatar">
      <img class="logo" src="../assets/logo.png" alt>
    </div>
    <div class="text">
      <p>
        <span>海川云谷固定资产管理云平台</span>
      </p>
    </div>
    <el-form
      ref="registerFrom"
      :label-position="labelPosition"
      :model="registerFrom"
      label-width="100px"
      class="demo-ruleForm container"
      status-icon
      :rules="rules2"
    >
      <div class="title">
        <span>企业注册</span>
      </div>
      <div class="aside">
        <el-form-item label="企业名称" prop="company">
          <el-input
            type="company"
            v-model="registerFrom.company"
            auto-complete="off"
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="联 系 人" prop="username">
          <el-input
            type="username"
            v-model="registerFrom.username"
            auto-complete="off"
            placeholder="请输入联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="账 号" prop="mobile">
          <el-input v-model.number="registerFrom.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="验 证 码" prop="auth">
          <el-input
            type="auth"
            v-model="registerFrom.auth"
            auto-complete="off"
            placeholder="请输入验证码"
            style="width:150px;"
          ></el-input>
          <el-button
            v-show="show"
            type="primary"
            class="auth-btn"
            @click="getAuthCode('form')"
            style="margin:0 0 0 35px"
          >获取验证码</el-button>
          <el-button
            v-show="!show"
            disabled
            type="primary"
            class="count"
            @click="getAuthCode('form')"
            style="margin:0 0 0 35px;background-color: #f68c11;border:none"
          >{{count}}S 可重发</el-button>
        </el-form-item>
        <el-form-item label="密 码" prop="password">
          <el-input
            type="password"
            v-model="registerFrom.password"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码验证" prop="checkPass">
          <el-input
            type="password"
            v-model="registerFrom.checkPass"
            auto-complete="off"
            placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>
        <!-- <div class="block"> -->
        <!-- <span class="demonstration">默认</span> -->
        <!-- <el-slider v-model="value1"></el-slider>
        </div>-->
      </div>
      <el-button type="primary" class="register-btn" @click="submitForm('registerFrom')">注册</el-button>
      <el-form-item></el-form-item>
      <router-link to="/Login">
        <el-button type="primary" class="register-btn">返回登录</el-button>
      </router-link>
    </el-form>
  </div>
</template>
           
<script>
import { axiosPost, axiosGet } from "../api/index.js";

export default {
  data() {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入11位手机号"));
        }
      }, 1000);
      callback();
    };
    var checkCompany = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("公司名称不能为空"));
      } else {
        callback();
      }
    };
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("联系人不能为空"));
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      } else {
        callback();
      }
    };
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入正确的验证码"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入6-16位字母加数字的密码"));
      } else {
        if (this.registerFrom.checkPass !== "") {
          this.$refs.registerFrom.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerFrom.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      show: true,
      count: "",
      timer: null,
      labelPosition: 'left',
      registerFrom: {
        password: "",
        checkPass: "",
        company: "",
        username: "",
        mobile: "",
        auth: "",
        account: ""
      },
      rules2: {
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        tel: [{ validator: checkTel, trigger: "blur" }],
        company: [{ validator: checkCompany, trigger: "blur" }],
        user: [{ validator: checkUser, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
        code: [{ validator: checkCode, trigger: "blur" }]
      }
    };
  },
  methods: {
    //获取验证码接口
    getAuthCode() {
      if (this.registerFrom.mobile === "") {
        this.$message({
          type: "error",
          message: "请输入手机号"
        });
        return;
      }
      axiosGet("/Account/GetAuthCode", {
        mobile: this.registerFrom.mobile
      });
      this.$message("验证码已发送,请耐心等待...");
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;

        this.show = false;

        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;

            clearInterval(this.timer);

            this.timer = null;
          }
        }, 1000);
      }
      /* axiosGet("/Account/GetAuthCode", { mobile: this.registerFrom.mobile });
      this.$message("验证码已发送,请耐心等待..."); */
    },

    //登陆账号
    getLogin: function() {
      var account = localStorage.getItem("account");
      var password = localStorage.getItem("password");
      var bean = {
        account: account,
        password: password
      };

      //登录接口
      axiosPost("/Account/Login", bean).then(res => {
        if (res.status === 200) {
          if (res.data.success) {
            // console.log(res.data.data);
            localStorage.setItem("userId", res.data.data.id);
            localStorage.setItem("userId", res.data.data.id);
            localStorage.setItem("account", res.data.data.account);
            localStorage.setItem("username", res.data.data.username);
            localStorage.setItem("password", res.data.data.password);
            localStorage.setItem("company", res.data.data.organizationName);
            localStorage.setItem("isAdmin", res.data.data.isAdmin);
            this.$router.push({ name: "Home" });
          } else {
            // 如果失败，展示提示信息
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        } else {
          // 如果失败，展示提示信息
          this.$message({
            type: "error",
            message: res.meta.msg
          });
        }
      });
    },

    //检验表单  并注册
    submitForm(formName) {
      // 校验表单
      if (this.registerFrom.company === "") {
        this.$message({
          type: "error",
          message: "请输入企业名称"
        });
        return;
      }
      if (this.registerFrom.username === "") {
        this.$message({
          type: "error",
          message: "请输入姓名"
        });
        return;
      }
      if (this.registerFrom.mobile === "") {
        this.$message({
          type: "error",
          message: "请输入手机号"
        });
        return;
      }
      if (this.registerFrom.auth === "") {
        this.$message({
          type: "error",
          message: "请输入验证码"
        });
        return;
      }
      if (this.registerFrom.password === "") {
        this.$message({
          type: "error",
          message: "请输入密码"
        });
        return;
      }
      if (this.registerFrom.checkPass === "") {
        this.$message({
          type: "error",
          message: "请再次输入密码"
        });
        return;
      }
      this.$refs[formName].validate(valide => {
        if (valide) {
          // 发送登录请求
          /* console.log(
            "表单验证通过之后---------  " + JSON.stringify(this.registerFrom)
          ); */
          var bean = {
            company: this.registerFrom.company,
            username: this.registerFrom.username,
            mobile: this.registerFrom.mobile,
            account: this.registerFrom.mobile,
            auth: this.registerFrom.auth,
            password: this.registerFrom.password
          };
          // console.log(JSON.stringify(bean));
          axiosPost("/Account/Register", bean).then(res => {
            if (res.status === 200) {
              // console.log(res.data);
              if (res.data.success) {
                // 1. 存储后台返回的登录成功凭证token
                localStorage.setItem("account", bean.account);
                localStorage.setItem("username", bean.username);
                localStorage.setItem("password", bean.password);
                localStorage.setItem("company", bean.company);
                //注册成功之后去登陆
                this.getLogin();
              } else {
                // 如果失败，展示提示信息
                this.$message({
                  type: "error",
                  message: res.data.message
                });
              }
            } else {
              // 如果失败，展示提示信息
              this.$message({
                type: "error",
                message: res.meta.msg
              });
            }
          });
        } else {
          // console.log("校验不通过");
        }
      });
    }
  }
};
</script>
<style lang = 'scss' scoped>
.register {
  position: absolute;
  width: 100%;
  height: 150%;
  color: #fff;
  background: url("../assets/01.jpg") center no-repeat;
  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 30px 40px 15px 40px;
    margin: 130px auto;
    background: #282a30;
    border-radius: 2%;
  }
  .logo {
    border-width: 0px;
    position: absolute;
    left: 25px;
    top: 10px;
    width: 65px;
    height: 63px;
  }
  .text {
    border-width: 0px;
    position: absolute;
    left: 100px;
    top: 37px;
    width: 398px;
    height: 40px;
    font-family: "Arial-BoldMT", "Arial Bold", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    color: #fff;
  }
  .register-btn {
    width: 100%;
    border: none;
    background-color: #f68c11;
  }
  .code-btn {
    margin: 0 0 0 30px;
    background-color: #f68c11;
  }
  .auth-btn {
    border: none;
    background-color: #f68c11;
  }
  .title {
    font-size: 20px;
    color: #ccc;
    text-align: center;
    line-height: 20px;
    margin: 10px 0;
    font-weight: 700;
  }
}
</style>
<style>
.aside {
  color: #fff !important;
}
</style>